<!--
 * @Author: Lizhenyu
 * @Date: 2021-07-22 14:36:53
 * @FilePath: \usp-osm-frondend\src\views\serviceCenter\serviceMgmt\index.vue
-->
<template>
  <div class="source" v-loading="pageLoading" element-loading-text="加载中...">
    <v-notes>
      <el-form
        label-width="160px"
        :model="serviceForm"
        ref="searchForm"
        class="search-form"
        size="small"
      >
        <el-row class="search-row">
          <el-col :span="24">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="服务编号" prop="code">
                  <el-input
                    placeholder="服务编号"
                    v-model="serviceForm.code"
                    @input="serviceForm.code=serviceForm.code.replace(/[^\a-\z\A-\Z0-9\40]/g,'')"
                    clearable
                    @keyup.enter.native.prevent="searchService"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="服务名称" prop="name">
                  <el-input
                    placeholder="服务名称"
                    v-model="serviceForm.name"
                    @input="serviceForm.name=serviceForm.name.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')"
                    clearable
                    @keyup.enter.native.prevent="searchService"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="服务商名称" prop="serviceProviderName">
                  <el-input
                    placeholder="服务商名称"
                    v-model="serviceForm.serviceProviderName"
                    @input="serviceForm.serviceProviderName=serviceForm.serviceProviderName.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')"
                    clearable
                    @keyup.enter.native.prevent="searchService"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-collapse-transition>
              <div class="filterContent" v-if="showContent">
                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-form-item label="是否绑定券池" prop="isBoundCoupon">
                      <el-select
                        v-model="serviceForm.isBoundCoupon"
                        placeholder="请选择"
                        popper-class="select-class"
                        :popper-append-to-body="false"
                      >
                        <el-option key label="全部" value></el-option>
                        <el-option
                          v-for="item in isBoundList"
                          :key="item.dicCode"
                          :label="item.dicName"
                          :value="item.dicCode"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="状态" prop="status">
                      <el-select
                        v-model="serviceForm.status"
                        placeholder="请选择"
                        popper-class="select-class"
                        :popper-append-to-body="false"
                      >
                        <el-option key label="全部" value></el-option>
                        <el-option
                          v-for="item in lookupItems.SERVICESTATUS"
                          :key="item.dicCode"
                          :label="item.dicName"
                          :value="item.dicCode"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="创建时间">
                      <div class="block">
                        <el-date-picker
                          v-model="serviceForm.createTime"
                          type="daterange"
                          range-separator="至"
                          :picker-options="pickerOptions"
                          :default-value="[new Date(), new Date()]"
                          value-format="yyyy-MM-dd"
                          start-placeholder="开始时间"
                          end-placeholder="结束时间"
                        ></el-date-picker>
                      </div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-form-item label="服务类型" prop="type">
                      <el-select
                        v-model="serviceForm.type"
                        placeholder="请选择"
                        popper-class="select-class"
                        :popper-append-to-body="false"
                      >
                        <el-option key label="全部" value></el-option>
                        <el-option
                          v-for="item in lookupItems.SERVICETYPE"
                          :key="item.dicCode"
                          :label="item.dicName"
                          :value="item.dicCode"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </el-collapse-transition>
          </el-col>
        </el-row>
        <el-row class="search-row">
          <el-col :span="8" :offset="16" style="text-align: right">
            <el-button
              @click="closeFilter"
              :icon="showContent ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
              class="white-btn filterClose"
            >
              {{ showContent ? '折叠' : '展开' }}
            </el-button>
            <el-button
              @click="resetForm('searchForm')"
              icon="el-icon-refresh-left"
              class="white-btn"
              >重置</el-button
            >
            <el-button
              @click="searchService"
              icon="el-icon-search"
              class="dark-btn search-btn"
              >搜索</el-button
            >
          </el-col>
        </el-row>
        <!-- Filter start -->
      </el-form>
    </v-notes>
    <div class="mb-lg">
      <v-table
        :data="tableData"
        ref="multipleTable"
        :listLoading="listLoading"
        :loadingText="loadingText"
        :paginationTotal="total"
        v-on:pageSizeChange="pageSizeChange"
        v-on:currentPageChange="currentPageChange"
        border
        pagination
      >
        <div slot="header">
          <el-button
            @click="addservice('add')"
            v-if="$auth('serviceRightsConfigurationCenter:serviceManagement:add')"
            icon="el-icon-plus"
            class="dark-btn"
            style="margin-bottom: 0 !important"
            >新增</el-button
          >
        </div>
        <!-- <el-table-column
          type="index"
          label="NO."
          align="center"
        ></el-table-column> -->
        <el-table-column
          label="服务编号"
          align="center"
          min-width="120"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <span class="colorLink" @click="toDetail(scope.row, 'detail')">
              {{ scope.row.code }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          label="服务名称"
          align="center"
          min-width="110"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <!-- {{ getDictionaryNameByCode('LABELTYPE', scope.row.serviceType) }} -->
            {{ scope.row.name }}
          </template>
        </el-table-column>
        <el-table-column
          label="服务商名称"
          align="center"
          min-width="110"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            {{ scope.row.serviceProviderName }}
          </template>
        </el-table-column>
        <el-table-column
          label="服务类型"
          align="center"
          min-width="110"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            {{ getDictionaryNameByCode('SERVICETYPE', scope.row.type ) }}
          </template>
        </el-table-column>
        <el-table-column
          label="是否绑定券池"
          align="center"
          min-width="110"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">{{ scope.row.isBoundCoupon === '1' ? '是' : '否' }}</template>
        </el-table-column>
        <el-table-column
          label="状态"
          align="center"
          min-width="110"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            {{ getDictionaryNameByCode('SERVICESTATUS', scope.row.status) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          align="center"
          min-width="160px"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            {{ scope.row.createTime | timestampToChange('time') }}
          </template>
        </el-table-column>
        <el-table-column
          prop="updateTime"
          label="更新时间"
          align="center"
          min-width="160px"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            {{ scope.row.updateTime | timestampToChange('time') }}
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          fixed="right"
          align="center"
          min-width="160"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <el-row type="flex" justify="space-around">
              <el-col>
                <span
                  v-if="scope.row.status === '1' || scope.row.status === '3'"
                  class="edit-item colorLink"
                  @click="editservice(scope.row, 'edit')"
                >
                  <i class="el-icon-edit"></i>
                  编辑
                </span>
              </el-col>
              <el-col v-if="$auth('serviceRightsConfigurationCenter:serviceManagement:changeStatus')">
                <span v-if="scope.row.status === '1' || scope.row.status === '3'" class="edit-item colorLink" @click="Disable(scope.row)">
                  <i  class="el-icon-open"></i>
                  启用
                </span>
                <span v-if="scope.row.status === '2'" class="edit-item colorLink" @click="Disable(scope.row)">
                  <i  class="el-icon-turn-off"></i>
                  禁用
                </span>
              </el-col>
              <el-col>
                <span
                  v-if="scope.row.status === '1' || scope.row.status === '3'"
                  class="edit-item colorLink"
                  @click="deleteService(scope.row)"
                >
                  <i class="el-icon-delete"></i>
                  删除
                </span>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
      </v-table>
    </div>
  </div>
</template>

<script>
import VNotes from '@/components/Notes/index'
import VTable from '@/components/PageTable/index'
import { getServiceList, saveServiceEdit, deleteService } from '@/api/service'
import { common } from '@/mixins/common'
import { mapGetters } from 'vuex'
// import { parseTime } from '@/utils'
export default {
  name: 'serviceMgmt',
  components: {
    VNotes,
    VTable
  },
  mixins: [common],
  data () {
    return {
      tableData: [],
      showContent: false,
      pageLoading: false,
      defaultTime: [new Date(), new Date()],
      isBoundList: [
        {
          dicCode: '1',
          dicName: '是'
        },
        {
          dicCode: '0',
          dicName: '否'
        }
      ],
      serviceForm: {
        code: '',
        name: '',
        isBoundCoupon: '',
        status: '',
        createTime: [],
        type: '',
        serviceProviderName: '',
        displayStart: 0, // 开始查询条数
        displayLength: 10 // 每页展示条数
      },
      listLoading: false,
      loadingText: '加载中...',
      total: 0,
      pageSize: 10,
      currentPage: 0,
      pickerOptions: {
        disabledDate (time) {
          // 如果没有后面的-8.64e7就是不可以选择今天的
          return time.getTime() > Date.now() // - 8.64e7
        }
      }
    }
  },
  computed: {
    ...mapGetters(['lookupItems', 'roles'])
  },
  created () {
    this.fetchList()
  },
  mounted () {},
  methods: {
    searchService () {
      this.currentPage = 0
      this.$refs.multipleTable.restPage()
      this.fetchList()
    },
    fetchList () {
      if (!this.$auth('serviceRightsConfigurationCenter:serviceManagement:list')) {
        this.$alert('您没有权限')
        return false
      }
      this.listLoading = true
      const params = {
        ...this.serviceForm,
        displayStart: this.currentPage,
        displayLength: this.pageSize,
        createTimeStart: this.serviceForm.createTime ? new Date(this.serviceForm.createTime[0] + ' ' + '00:00:00').getTime() : '',
        createTimeEnd: this.serviceForm.createTime ? new Date(this.serviceForm.createTime[1] + ' ' + '23:59:59').getTime() : ''
      }
      getServiceList(params).then((res) => {
        this.listLoading = false
        if (res) {
          if (Number(res.code) === 1) {
            const obj = res.obj
            this.tableData = obj.data || []
            this.total = obj.total
          } else if (Number(res.code) === 0) {
            this.$confirm(res.msg, {
              confirmButtonText: '确定',
              showCancelButton: false
            })
          } else {
            this.$confirm(this.$t(res.code), {
              confirmButtonText: '确定',
              showCancelButton: false
            })
          }
        }
      })
    },
    resetForm (formName) {
      this.serviceForm = {
        code: '',
        name: '',
        isBoundCoupon: '',
        status: '',
        createTime: [],
        serviceProviderName: '',
        type: '',
        displayStart: 0, // 开始查询条数
        displayLength: 10 // 每页展示条数
      }
      this.searchService()
    },
    pageSizeChange (size) {
      this.pageSize = size
      this.fetchList()
    },
    currentPageChange (curPage) {
      this.currentPage = curPage - 1
      this.fetchList()
    },
    Disable (row) {
      if (!this.$auth('serviceRightsConfigurationCenter:serviceManagement:changeStatus')) {
        this.$alert('您没有权限')
        return false
      }

      let statusFlag
      if (row.status === '1' || row.status === '3') {
        statusFlag = true
      } else {
        statusFlag = false
      }
      const params = {
        id: row.id,
        status: statusFlag ? '2' : '3'
      }
      this.$alert(`是否${statusFlag ? '启用' : '禁用'}${row.name}服务`, `${statusFlag ? '启用' : '禁用'}`, {
        showCancelButton: true,
        showConfirmButton: true,
        callback: action => {
          if (action === 'confirm') {
            saveServiceEdit(params).then(res => {
              if (res) {
                if (Number(res.code) === 1) {
                  this.$alert('操作成功')
                  this.fetchList()
                } else if (Number(res.code) === 0) {
                  this.$alert(res.msg)
                }
              }
            })
          }
        }
      })
    },
    deleteService (row) {
      const params = {
        id: row.id
      }
      this.$alert(`是否删除${row.name}服务`, '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '关闭',
        showCancelButton: true,
        callback: action => {
          if (action === 'confirm') {
            deleteService(params).then(res => {
              if (res) {
                if (Number(res.code) === 1) {
                  this.$alert('删除成功')
                  this.fetchList()
                } else {
                  this.$alert(res.msg)
                  this.fetchList()
                }
              }
            })
          }
        }
      })
    },
    addservice (type) {
      // if (!this.$auth('serviceRightsConfigurationCenter:serviceManagement:add')) {
      //   this.$alert('您没有权限')
      //   return false
      // }
      this.$router.push({ name: 'addService', params: { id: '', type: 'add' } })
    },
    editservice (row, type) {
      if (!this.$auth('serviceRightsConfigurationCenter:serviceManagement:edit')) {
        this.$alert('您没有权限')
        return false
      }
      this.$router.push({ name: 'editService', params: { id: row.id, type: 'edit' } })
    },
    toDetail (row, type) {
      if (!this.$auth('serviceRightsConfigurationCenter:serviceProviderManagement:detail')) {
        this.$alert('您没有权限')
        return false
      }
      this.$router.push({ name: 'editService', params: { id: row.id, type: 'detail' } })
    },
    closeFilter () {
      this.showContent = !this.showContent
    }
  }
}
</script>

<style>
</style>
